<template>
  <div class="item" @click="handleClick">
    <div class="icon">
      <img :src="icon" alt>
    </div>
    <div class="text">
      <p>{{text}}</p>
    </div>
    <Badge class="badge" v-if="badge" :badge="badge" />
  </div>
</template>

<script>

import Badge from '@/components/common/Badge'
export default {
  props: ["text", "icon", "badge"],
  components: {
    Badge,
  },
  data() {
    return {
    };
  },
  methods: {
    handleClick() {
      this.$emit("go");
    }
  }
};
</script>

<style lang="less" scoped>
.item {
  display: inline-block;
  position: relative;
  width: 24vw;
  .icon {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4vw 0 2vw 0;
    img {
      width: 8vw;
      height: 8vw;
    }
  }
  .text {
    padding-bottom: 3vw;
    text-align: center;
    font-size: 3.5vw;
  }
  .badge {
    position: absolute;
    top: 3vw;
    right: 3vw;
  }
}
</style>